<template>
  <div class="regiser-container">
    <div class="form-content">
      <el-form ref="formRef" :model="registerStore.userInfo" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号:" prop="userAccount">
              <div style="display: flex">
                <el-input v-model="registerStore.userInfo.userAccount" placeholder="请输入账号" />
                <el-icon v-if="checked" style="margin: 10px; color: green"><CircleCheck /></el-icon>
                <el-icon v-if="loading" style="margin: 10px; color: green"><Loading /></el-icon>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="昵称:" prop="nickname">
              <el-input v-model="registerStore.userInfo.nickname" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <Dict v-model="registerStore.userInfo.gender" code="GENDER" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                v-model="registerStore.userInfo.birthDate"
                type="date"
                format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-footer">
      <el-button type="primary" @click="handlerNextStep">下一步</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRegisterStore } from "@/store/modules/register.store";
import UserAPI from "@/api/system/user.api";

const registerStore = useRegisterStore();

const formRef = ref();
const checked = ref(false);
const loading = ref(false);

// 禁用今天之后的日期
const disabledDate = (time: any) => {
  // 获取今天0点的时间戳（忽略时分秒）
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  // 禁用所有大于今天的日期
  return time.getTime() > today.getTime();
};

// 账号唯一性验证规则
const validateAccountUnique = (rule: any, value: any, callback: any) => {
  checked.value = false;
  if (value) {
    loading.value = true;
    UserAPI.checkAccount(value)
      .then((isAvailable) => {
        checked.value = isAvailable;
        if (isAvailable) {
          callback();
        } else {
          callback(new Error("该账号已被注册"));
        }
      })
      .catch(() => {
        callback(new Error("验证失败，请稍后重试"));
      })
      .finally(() => {
        loading.value = false;
      });
  } else {
    callback(new Error("请填写账号"));
  }
};

const rules = reactive({
  userAccount: [{ validator: validateAccountUnique, trigger: "blur" }],
  nickname: [{ required: true, message: "请填写昵称", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  birthDate: [{ required: true, message: "请选择出生日期", trigger: "blur" }],
});

function handlerNextStep() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      // 触发完成事件，传递当前步骤数据
      emit("complete", { success: true });
    }
  });
}
const emit = defineEmits(["complete"]);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.regiser-container {
  padding-top: 20px;
  .form-content {
    min-height: 600px;
  }
  .form-footer {
    display: flex;
    justify-content: right;
  }
}
</style>
